<template>
  <!-- 会员类型管理 -->
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="89px"
    >
      <el-form-item label="会员卡名称" prop="memberTypeName">
        <el-input
          v-model="queryParams.memberTypeName"
          placeholder="请输入会员卡名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="mini"
          @click="resetting"
        >重置</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 新增按钮模块 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button
        >
      </el-col>
    </el-row>
    <!-- 列表数据展示 -->
    <el-table
      v-loading="loading"
      :data="menberList"
      :header-cell-class-name="'headerBg'"
      class="bold-header"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="index" width="55" align="center" />
      <!-- <el-table-column label="编号" align="center" prop="id" /> -->
      <el-table-column label="会员类型" align="center" prop="memberType" >
        <template slot-scope="scope">
          <span v-if="scope.row.memberType === 0">次卡</span>
          <span v-if="scope.row.memberType === 1">月卡</span>
          <span v-if="scope.row.memberType === 2">年卡</span>
          <span v-if="scope.row.memberType === 3">体验卡</span>
        </template>
      </el-table-column>
      <el-table-column label="会员卡名称" align="center" prop="memberTypeName" :show-overflow-tooltip="true"/>
      <el-table-column label="会员卡天数" align="center" prop="cardDays" :show-overflow-tooltip="true"/>
      <el-table-column label="会员备注" align="center" prop="memberTypeRemarks"  :show-overflow-tooltip="true" />
      <el-table-column
        align="center"
        prop="liveRoomStatus"
        label="启用/禁用">
        <!-- 滑块开关 -->
        <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.enableStatus === 1"> 禁用 </el-tag>
          <el-tag type="success" v-else> 正常 </el-tag>
        </template>
        <template slot-scope="scope">
          <el-switch v-model="scope.row.enableStatus"
                     active-color="#13ce66"
                     inactive-color="#ff4949"
                     :active-value="0"
                     :inactive-value="1"
                     @change=toggleDisableStatus(scope.row)>
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改</el-button
          >
          <el-button
            style="color: red;"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改窗口 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form
        ref="addForm"
        :model="addForm"
        label-width="150px"
        :rules="rules"
        class="form-container"
        :inline="true"
      >
        <el-input
          v-model="addForm.id"
          placeholder="id"
          type="hidden"
        ></el-input>
        <el-form-item label="会员类型" prop="memberType">
          <el-select v-model="addForm.memberType" placeholder="请选择入会员类型">
            <el-option label="次卡" :value="0"></el-option>
            <el-option label="月卡" :value="1"></el-option>
            <el-option label="年卡" :value="2"></el-option>
            <el-option label="体验卡" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="addForm.memberType !== 0" label="会员卡使用天数" prop="cardDays">
          <el-input v-model="addForm.cardDays" placeholder="请输入会员卡使用天数"></el-input>
        </el-form-item>
        <el-form-item label="会员卡名称" prop="memberTypeName">
          <el-input
            v-model="addForm.memberTypeName"
            placeholder="请输入会员卡名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="memberTypeRemarks">
          <el-input
            v-model="addForm.memberTypeRemarks"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
        <div class="button-container" style="text-align: right;">
          <el-button @click="cancelAll">取消</el-button>
          <el-button type="primary" @click="submitForm('form')">提交</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!--分页效果-->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    >
    </pagination>
  </div>
</template>
<script>
import { getMemberType,getById,addMember,delMember,updateMemberById,updateEnableStatus } from "@/api/member/index";
import { Message } from "element-ui";
export default {
  data() {
    return {
      // 租户标识
      venueUniqueIdentifier:'',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 表格数据
      menberList: [],
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        venueUniqueIdentifier:'',
        memberTypeName: '',
        // 第几页
        pageNum: 1,
        // 每页条数
        pageSize: 10,
        // // 总条数
        // total: 0,
      },
      // 总条数
      total: 0,
      // 当前页码
      currentPage4: 1,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      addForm: {},
      // 表单校验
      rules: {
        memberType: [{required: true, message: "请选择会员类型", trigger: "blur" }],
        cardDays:[{required:true,message:"请输入会员卡使用天数",trigger: "blur" }],
        memberTypeName: [
          { required: true, message: "请输入会员类型名称", trigger: "blur" },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        memberTypeRemarks: [{required: true, message: "请输入会员备注", trigger: "blur"},
          {  max: 30, message: '最大长度在30个字符', trigger: 'blur' }]
      },
    };
  },
  created() {
    if(sessionStorage.getItem('venueUniqueIdentifier')){
      this.venueUniqueIdentifier = sessionStorage.getItem('venueUniqueIdentifier');
    }
    this.getList(this.venueUniqueIdentifier);
  },
  methods: {
    // 模糊查询操作
    handleQuery() {
      const that = this;
      this.getList()
    },
    // 重置按钮
    resetting() {
      this.queryParams.memberTypeName="";
      this.getList();
    },
    // 全查操作
    getList() {
      const that = this;
      this.loading = true;
      this.queryParams.venueUniqueIdentifier = this.venueUniqueIdentifier;
      getMemberType(this.addDateRange(this.queryParams))
        .then((res) => {
          this.menberList = res.data.content;
          this.total = res.data.totalSize;
          this.loading = false;
        });
    },
    // 查询一条操作
    handleFind(row) {
      this.title = "查看会员类型信息";
      this.open = true;
      this.loading = true;
      this.shaoSaveButton = false;
      const id =row.id
      const venueUniqueIdentifier =this.venueUniqueIdentifier
      getById(id,venueUniqueIdentifier).then((res) => {
        this.addForm = res.data;
        this.loading = false;
      });
    },
    // 修改按钮操作
    handleUpdate(row) {
      if (row.enableStatus === 1) {
        // 添加判断条件
        this.open = true;
        this.handleFind(row);
        this.title = "修改会员信息";
      } else {
        // isDisable 不等于 1，不能打开修改窗口
        Message.error("该会员信息正在启用，无法进行修改操作！！！");
      }
    },
    // 删除
    handleDelete(row) {
      const that = this;
      if(row.enableStatus === 0){
        Message.error("该会员信息正在启用，无法进行删除操作！！！");
      }else{
        this.$confirm("此操作将永久删除该类型, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            delMember(row.id,row.venueUniqueIdentifier)
              .then((res) => {
                this.$message({ type: "success", message: "删除成功" });
                that.getList();
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    // 提交按钮
    submitForm() {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          this.addForm.venueUniqueIdentifier = this.venueUniqueIdentifier
          if (this.addForm.id != null) {
            // 修改方法
            updateMemberById(
              this.addForm
            )
              .then((res) => {
                if (res.data.code === 200) {
                  this.$message({ type: "success", message: "修改成功" });
                  // 关闭窗口
                  this.open = false;
                  //刷新
                  this.getList();
                } else {
                  this.$message.error({ type: "warning", message: "修改失败" });
                }
              });
          } else {
            addMember(this.addForm)
              .then((res) => {
                if (res.data.code === 200) {
                  this.$message({ type: "success", message: "添加成功" });
                  // 关闭窗口
                  this.open = false;
                  //刷新
                  this.getList();
                } else {
                  this.$message.error({ type: "warning", message: "添加失败" });
                }
              });
          }
        }
      });
    },
    // 取消按钮
    cancelAll() {
      this.open = false;
    },
    // 新增按钮操作
    handleAdd() {
      this.open = true;
      this.title = "添加会员类型";
      // 清除表单数据
      if (this.$refs.addForm !== undefined) {
        this.$refs.addForm.resetFields();
      }
      this.addForm.id = null
    },
    // 启用禁用状态按钮
    toggleDisableStatus(row) {
      const id = row.id;
      const enableStatus = row.enableStatus;
      const venueUniqueIdentifier = row.venueUniqueIdentifier
      if(row.enableStatus === 1){
        updateEnableStatus(
          id,
          enableStatus,
          venueUniqueIdentifier
        )
          .then((res) => {
            console.log(res.data)
            if(res.data === "null"){
              this.$message({ type: "error", message: "禁用失败，该会员下仍有会员用户" });
              this.getList();
            }else{
              this.$message({ type: "error", message: "禁用成功" });
              this.getList();
            }

            // 处理成功
          });
      }else{
        updateEnableStatus(
          id,
          enableStatus,
          venueUniqueIdentifier
        )
          .then((res) => {
            this.$message({ type: "success", message: "启用成功" });
            this.getList();
            // 处理成功
          });
      }

    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.lid);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    // 分页每页条数显示
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
      console.log(`每页 ${val} 条`);
    },
    // 分页当前页显示
    handleCurrentChange(val) {
      this.currentPage4 = val;
      this.queryParams.pageNum = val;
      this.getList();
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
<style>
.headerBg {
  background: #eee !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}

.bold-header .el-table__header th {
  font-weight: bold;
}
.button-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
